﻿@page "/WordList"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Win32
@using MoqWord.Components.Components.FaIcon
@using MoqWord.Components.Components.RandomColor
@using System.IO
@using MyTag = MoqWord.Model.Entity.Tag;
@using ColorHelper;
@using MoqWord.Utlis;

@inject IMessageService _message
@inject IConfirmService _confirmService
@inject IBookService _service
@inject IWordService _wordService
@inject ITagService _tagService
@inject ISettingService _settingService
@inject TypeAdapterConfig _config

<div class="flex flex-col w-full h-full relative px-4 gap-4">
    <div class="flex flex-row">
        @foreach (var item in languageCategorys ?? [])
        {
            if (string.IsNullOrEmpty(item))
            {
                continue;
            }
            <span class="bg-gray-200 shadow cursor-pointer hover:bg-gray-300 p-2 px-6 text-lg border-gray-300 border-b-4 @(curBook == item ? "border-blue-300" : "")" @onclick="()=> SetCurBook(item)">@getLanName(item)</span>
        }
    </div>

    <div class="grid grid-cols-4 gap-5">
        @{
            if (!string.IsNullOrEmpty(curBook) && categories != null)
            {
                var bookList = categories?.Where(c => c.LanguageCategory == getLanKey(curBook))
                    .GroupBy(c => c.Category).Where(k => !string.IsNullOrEmpty(k.Key));
                foreach (var item in bookList ?? [])
                {
                    var tags = item.SelectMany(c => c.Tags)
                        .GroupBy(c => c.Name)
                        .Select(c => c.First())
                        .ToList();
                    if (bookList != null && currentTags.Count < bookList?.Count())
                    {
                        currentTags.Add(item.Key, tags[0]);
                    }
                    <div class="col-span-4 flex flex-row flex-wrap gap-2">
                        @foreach (var t_item in tags)
                        {
                            <span class="bg-gray-200 shadow rounded cursor-pointer hover:bg-gray-300 p-2 px-6 text-lg border-b-4" @onclick="()=> SetCurTag(item.Key, t_item)">@t_item.Name</span>
                        }
                    </div>
                        foreach (var b_item in item.Where(b => b.Tags.Any(t => t.Name == currentTags[item.Key].Name)))
                        {
                            <div class="group relative h-[320px] flex flex-col items-center justify-center shadow-md rounded transition-all duration-500 cursor-pointer hover:-translate-y-1"
                                 style="background:#@(b_item.Color)">
                                <span class="text-2xl font-bold m-auto group-hover:text-sky-500 transition-all">@b_item.Name</span>
                                <div class="mt-auto flex flex-col w-full">
                                    <div class="flex justify-around">
                                        <span class="!block bg-gray-100 rounded-md p-1">背完@(b_item.GraspCount)个</span>
                                        <span class="!block bg-gray-100 rounded-md p-1">总共@(b_item.Count)个</span>
                                    </div>
                                    <Progress Class="!w-10/12 !m-auto" Percent=@(b_item.GraspCount / b_item.Count * 100) ShowInfo="false" />
                                </div>
                                @if (b_item.IsCurrent)
                                {
                                    <FaIcon Class="absolute right-3 top-3 text-white text-bold" Type="fa-check" IsInherit="true" />
                                }
                                <div class="absolute insert-0 flex items-center justify-center gap-5 bg-gray-100 transition-all opacity-0 group-hover:opacity-70 w-full h-full">
                                    <Button Type="@ButtonType.Primary" OnClick="()=> SelectBook(b_item)">选择</Button>
                                    <Button Type="@ButtonType.Primary" OnClick="()=> openWordsView(b_item)">查看</Button>
                                </div>
                            </div>
                        }
                }
            }
        }
        

    </div>
    <div class="fixed right-12 bottom-12 w-[48px] h-[48px] flex items-center justify-center bg-white shadow-md rounded-full cursor-pointer hover:bg-gray-50" @onclick="()=>openModal()">
        <FaIcon Type="fa-plus" IsInherit="true"/>
    </div>
</div>

@if (currSelectBook != null)
{
    <Drawer @bind-Visible="wordsView" Title="@($"{currSelectBook.Name}单词列表")" Width="500">
        <Virtualize Items="@currSelectBook.Words" Context="item">
            <div class="relative flex flex-col bg-slate-300 gap-3 my-3 p-3 rounded shadow-current">
                <div class="flex flex-row gap-2">
                    <span class="text-base text-black font-medium">@item.WordName</span>
                    <span class="text-base text-black text-gray-600">英 @item.AnnotationUk 美 @item.AnnotationUs</span>
                </div>
                <span class="text-base text-black font-medium">@item.Translation</span>
                <FaIcon OnClick="p => PlayWord(item)" Class=" absolute right-3 top-1/2 -translate-y-1/2" Type="fa-volume-low"></FaIcon>
            </div>
        </Virtualize>
    </Drawer>
}
<Modal Title="@("添加字典")" @bind-Visible="modalIsVisible" Draggable Footer="null">
    <Form Model="@model" OnFinish="OkHandle"
          LabelColSpan="4"
          WrapperColSpan="20">
        <FormItem Label="导入平台">
            <RadioGroup @bind-Value="selectPlatform" ButtonStyle="@RadioButtonStyle.Solid">
                <Radio RadioButton Value="@("Qwerty")">Qwerty</Radio>
                <Radio RadioButton Value="@("不背单词")" Disabled>不背单词</Radio>
                <Radio RadioButton Value="@("有道")" Disabled>有道</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem Label="分类名称">
            <Input @bind-Value="model.LanguageCategory"></Input>
        </FormItem>
        <FormItem Label="字典名称">
            <Input @bind-Value="model.Name"></Input>
        </FormItem>
        <FormItem Label="语言">
            <Input @bind-Value="model.Language"></Input>
        </FormItem>
        <FormItem Label="标签列表">
            <Select Bordered ShowArrowIcon Mode="tags" TItem="MyTag" TItemValue="string" ValueName="@nameof(MyTag.Name)" LabelName="@nameof(MyTag.Name)" @bind-Values="selectTags" AllowClear>

            </Select>
        </FormItem>
        <FormItem Label="分类描述">
            <TextArea @bind-Value="model.Description" Placeholder="请输入字典描述.."></TextArea>
        </FormItem>
        <FormItem Label="背景颜色">
            <RandomColor @bind-Color="model.Color" />
        </FormItem>
        <div class="flex flex-row">
            <Button Class="ml-auto" Type="@ButtonType.Primary" HtmlType="submit">新增</Button>
        </div>
    </Form>
</Modal>
